import { useState } from 'react';
import './hotspot.css';
import e from '../../public/img/e.png'
const tags = ['精选推荐', '人工智能', '医疗养生', '古风模板'];

interface HotspotCard {
  type: string;
  img: string;
  title: string;
  subtitle?: string;
  info?: string;
  count?: string;
}

const mockData: { [key: string]: HotspotCard[] } = {
  '精选推荐': [
    {
      type: 'big',
      img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C._8P3bVPlp3VNj5C3ZJg0hQHaLH?w=160&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
      title: '',
      subtitle: '',
      info: '八一建军节海报',
      count: '共300个作品>'
    },
    {
      type: 'small',
      img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.nvYpjpCUby0fMdLlWc9YWAHaK3?w=206&h=302&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '狂暑季电商模板',
      count: '共270个作品>'
    },
    {
      type: 'small',
      img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BI53LF_jZvcfO1eQmG5OSQHaK3?w=181&h=265&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '营销促销海报',
      count: '共73个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.EJGUGY3puVP6cz_ADQYq0QHaFj?w=251&h=188&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '夏季空镜实拍',
      count: '共185个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.83i4cLudwQiBWw26o6Pt7wHaLL?w=115&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '党政背景视频',
      count: '共107个作品>'
    }
  ],
  '人工智能': [
    {
      type: 'big',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.149ROIcOkbjc0SfvA1EBGAHaLb?w=201&h=310&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      subtitle: '',
      info: 'AI人工智能科技展板',
      count: '共300个作品>'
    },
    {
      type: 'small',
      img: '',
      title: '',
      info: '医美护肤海报',
      count: '共270个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ugZK29iQkitRWvcw2KQosgHaLH?w=204&h=306&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '口腔健康海报',
      count: '共73个作品>'
    },
    {
      type: 'small',
      img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ALgsouzBj4HnDbCzhdeVWQHaLH?w=204&h=306&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: 'AI人工智能H5',
      count: '共185个作品>'
    },
    {
      type: 'small',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.-c9wV3yjCRynHTAeNU98LAAAAA?w=161&h=349&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      title: '',
      info: 'AI人工智能H5长图',
      count: '共107个作品>'
    }
  ],
  '医疗养生': [
    {
      type: 'big',
      img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Svm6ZNfi07i3HvGucPN9xAHaQB?w=161&h=349&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      title: '',
      subtitle: '',
      info: '三伏养生海报',
      count: '共300个作品>'
    },
    {
      type: 'small',
      img: '',
      title: '',
      info: '医美护肤海报',
      count: '共270个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.ugZK29iQkitRWvcw2KQosgHaLH?w=204&h=306&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '口腔健康海报',
      count: '共73个作品>'
    },
    {
      type: 'small',
      img: '',
      title: '',
      info: '医疗保健海报',
      count: '共185个作品>'
    },
    {
      type: 'small',
      img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.IU3HDfiXs3VXPrUeuMi0lgHaKB?w=208&h=282&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '医疗保险海报',
      count: '共107个作品>'
    }
  ],
  '古风模板': [
    {
      type: 'big',
      img: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.2v_nDFguBlDf69EzxW6xQAHaHa?w=152&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      subtitle: '',
      info: '古风水墨标题片头',
      count: '共300个作品>'
    },
    {
      type: 'small',
      img: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.B5pv0eTJ9sobVtJAPXfQgAHaEK?w=281&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '书画卷轴片头',
      count: '共270个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.YVCYCNbva4NZ86p3QPb7EQHaEK?w=311&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '古风国朝片头',
      count: '共73个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C._wsLpbjSAKA4ug-4g4PRxgHaLH?w=204&h=306&c=7&r=0&o=5&dpr=1.3&pid=1.7',
      title: '',
      info: '水墨宣传背景模板',
      count: '共185个作品>'
    },
    {
      type: 'small',
      img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.eRNTYIVTfZEWinqn5CCedgHaDt?w=306&h=175&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3',
      title: '',
      info: '古风字幕花字',
      count: '共107个作品>'
    }
  ]
};

function Hotspot() {
  const [activeTag, setActiveTag] = useState('精选推荐');
  const currentData = mockData[activeTag];

  return (
    <div className="hotspot-root">
      <div className="hotspot-header">
        <div className="hotspot-header-row">
          <h2 className="hotspot-title">
           <img src={e} alt="" />
          </h2>
          <div className="hotspot-tags">
            {tags.map(tag => (
              <span
                key={tag}
                className={`hotspot-tag ${activeTag === tag ? 'active' : ''}`}
                onMouseEnter={() => setActiveTag(tag)}
              >
                {tag}
              </span>
            ))}
          </div>
        </div>
    
      </div>
      <div className="hotspot-content">
        <div className="hotspot-left">
          {currentData[0] && (
            <div className="hotspot-card-big">
              <div className="hotspot-card-big-bg">
                <img src={currentData[0].img} alt={currentData[0].title} className="hotspot-card-img" loading="lazy" />
                <div className="hotspot-card-big-overlay">
                  <div className="hotspot-card-big-content">
                    <h3 className="hotspot-card-big-title">{currentData[0].title}</h3>
                    <p className="hotspot-card-big-subtitle">{currentData[0].subtitle}</p>
                  
                  </div>
                </div>
              </div>
              <div className="hotspot-card-big-bottom">
                <span>{currentData[0].info}</span>
                <span>{currentData[0].count}</span>
              </div>
            </div>
          )}
        </div>
        <div className="hotspot-right">
          {currentData.slice(1, 5).map((card, index) => (
            <div key={index} className="hotspot-card-small">
              <div className="hotspot-card-small-bg">
                <img src={card.img} alt={card.title} className="hotspot-card-img" loading="lazy" />
                <div className="hotspot-card-small-overlay">
                  <h4 className="hotspot-card-small-title">{card.title}</h4>
                </div>
              </div>
              <div className="hotspot-card-small-bottom">
                <span>{card.info}</span>
                <span>{card.count}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Hotspot;
